<template>
	<view class="out-box">
		<!-- 斜线 -->
		<view class="oblique-bar"></view>
		<view class="oblique-bar-two"></view>
		<!-- 登入表单卡片 -->
		<view class="login-card">
			<!-- 图标 -->
			<view class="login-image">
				<!-- 图片 -->
				<image style="width: 80%;height: 80%;" src="../../static/money.svg"></image>
				<!-- 页面名称 -->
				<view class="card-title">
					登录
				</view>
			</view>
			<!-- 表单 -->
			<view class="login-form">
				<!-- 账号 -->
				<view class="login-input">
					<!-- 前置提示文字 -->
					<view class="login-title">
						<text>手机号码</text>
					</view>
					<!-- input输入框盒子 -->
					<view class="input-box" :class="state.borderOne === true?'selectBorder':''">
						<!-- icon -->
						<view class="input-icon">
							<image src="../../static/phone.svg"></image>
						</view>
						<!-- 输入框 -->
						<view class="input-scanf">
							<input @focus="select(1)" @blur="lostSelect(1)" type="text" v-model="state.phone" placeholder="请输入手机号">
						</view>
					</view>
				</view>
				<!-- 密码-->
				<view v-show="state.changeLogin == false" class="login-input pass">
					<!-- 前置提示文字 -->
					<view class="login-title">
						<text>登入密码</text>
					</view>
					<!-- input输入框盒子 -->
					<view class="input-box" :class="state.borderTwo === true?'selectBorder':''">
						<!-- icon -->
						<view class="input-icon">
							<image src="../../static/password.svg"></image>
						</view>
						<!-- 输入框 -->
						<view class="input-scanf">
							<input @focus="select(2)" @blur="lostSelect(2)" type="text" v-model="state.password" placeholder="请输入密码" password="true">
						</view>
					</view>
				</view>
				<!-- 验证码-->
				<view v-show="state.changeLogin == true" class="login-input pass">
					<!-- 前置提示文字 -->
					<view class="login-title">
						<text>验证码</text>
					</view>
					<!-- input输入框盒子 -->
					<view class="input-box" :class="state.borderThree === true?'selectBorder':''">
						<!-- icon -->
						<view class="input-icon">
							<image src="../../static/check.svg"></image>
						</view>
						<!-- 输入框 -->
						<view class="input-scanf input-check">
							<input @focus="select(3)" @blur="lostSelect(3)" type="text" v-model="state.checkNumber" placeholder="请输入验证码" password="true">
						</view>
						<!-- 发送验证码按钮 -->
						<view @click="sendCheck" class="input-send"
							:class="state.checkTime==true?'input-send-color':''">
							{{state.check}}
						</view>
					</view>
				</view>
				<!-- 切换登入模式 || 忘记密码？ -->
				<view class="changeCheck">
					<view class="changeCheck-left" style="margin-left: 20rpx;">
						<text @click="goRegister">注册账号</text>
					</view>
					<view class="changeCheck-right">
						<!-- 验证码登录 -->
						<span @click="changeWay">{{state.loginWayText}}</span>
						<!-- 分割线 -->
						<span v-show="state.changeLogin == false" style="margin-left: 10rpx;margin-right: 10rpx;">|</span>
						<!-- 忘记密码 -->
						<span style="margin-right: 20rpx;">{{state.forgetPassword}}</span>
					</view>
				</view>
				<!-- 登录按钮 -->
				<view class="submit">
					<view class="submit-button" @click="login">
						登录
					</view>
				</view>
				<!-- 分割线 -->
				<view class="division">
					<!-- 左分割线 -->
					<view class="division-line"></view>
					<!-- 文字 -->
					<view class="division-text">或</view>
					<!-- 右分割线 -->
					<view class="division-line"></view>
				</view>
				<!-- 其它登录方法 -->
				<view class="other-login">
					<!-- 微信登录 -->
					<view class="wechat-login" @click="wechatLogin">
						<image src="../../static/wechat.svg"></image>
					</view>
					<!-- 支付宝登录 -->
					<view class="zhi-login" @click="zhiLogin">
						<image src="../../static/zhifubao.svg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message" style="text-align: center;">
			<uni-popup-message type="success" message="成功消息" :duration="500"></uni-popup-message>
		</uni-popup>
		<!-- 失败提示框 -->
		<view class="login-fail" :class="state.tostFail==true?'tostFail':''">
			账号或密码错误
		</view>
		<!-- 微信登录成功提示 -->
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	const message = ref(null)
	const utoast = ref(null)
	const state = reactive({
		phone: '',
		password: '',
		checkNumber:'',
		sendCode:'',
		changeLogin: false,
		check: '发送验证码',
		checkTime: false,
		loginWayText: '验证码登录',
		forgetPassword: '忘记密码?',
		ss:'',
		borderOne:false,
		borderTwo:false,
		borderThree:false,
		tostFail:false
	})
	// 发送验证码
	const sendCheck = () => {
		let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
		let result = re.test(state.phone);
		if(!result){
			// 轻提示手机号不正确
		}else{
			if (state.checkTime == false) {
				state.checkTime = true;
				let count = 120;
				let time = setInterval(() => {
					state.check = count;
					count = count - 1;
					if (count === -1) {
						clearInterval(time)
						state.check = '发送验证码'
						state.checkTime = false
					}
				}, 1000)
				uni.request({
					url:'http://124.221.162.230:8888/account/sendCode',
					method:"POST",
					data:{
						tel:state.phone
					},
					success: (res) => {
						state.sendCode = res.data.data
					}
				})
			}
		}
	}
	// 切换验证码登入和密码登入模式
	const changeWay = () => {
		if (state.changeLogin == false) {
			state.phone = ''
			state.password = ''
			state.changeLogin = true;
			state.loginWayText = '密码登录   '
			state.forgetPassword = ''
		} else {
			state.phone = ''
			state.checkNumber = ''
			state.changeLogin = false;
			state.loginWayText = '验证码登录'
			state.forgetPassword = '忘记密码?'
		}
	}
	// 点击进入注册页面
	const goRegister = () =>{
		uni.navigateTo({
			url:'/pages/register/register',
			animationType: 'pop-in',
			animationDuration: 200
		})
	}
	// 登录
	const login = () =>{
		// message.value.open()
		let tost = utoast;
		if(state.changeLogin === false){
			let obj = {}
			obj.tel = state.phone
			obj.password = state.password
			uni.request({
				url:'http://124.221.162.230:8888/account/login',
				method:"POST",
				data:obj,
				success: (res) => {
					if(res.data.code == 200){
						tost.value.show({
							type: 'success',
							title: '成功',
							message: "登录成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						uni.setStorage({
							key:'Authorization',
							data:res.data.data,
							success: () => {
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/index/index'
									})
								},1000)
							}
						})
					}else{
						// console.log('登入失败')
						state.tostFail = true
						setTimeout(()=>{
							state.tostFail = false
						},3000)
					}
				},
				fail: (err) => {
					// state.ss = err
					console.log(err)
				}
			})
		}else{
			if(state.sendCode !== state.checkNumber){
				// 轻提示验证码错误
			}else{
				let obj = {}
				obj.tel = state.phone
				uni.request({
					url:'http://124.221.162.230:8888/account/loginBySms',
					method:"POST",
					data: obj,
					success: (res) => {
						// 存token
						uni.setStorage({
							key:'Authorization',
							data:res.data.data,
							success: () => {
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/index/index'
									})
								},500)
							}
						})
					}
				})
			}
		}
	}
	// input框聚焦事件
	const select = (id) =>{
		// console.log(id)
		if(id === 1){
			state.borderOne = true
		}else if(id === 2){
			state.borderTwo = true
		}else if(id === 3){
			state.borderThree = true
		}
	}
	// input框失去焦点事件
	const lostSelect = (id) =>{
		if(id === 1){
			state.borderOne = false
		}else if(id === 2){
			state.borderTwo = false
		}else if(id === 3){
			state.borderThree = false
		}
	}
	onMounted(() => {
		uni.getStorage({
			key:'Authorization',
			success: () => {
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		})
	})
	// 微信登入
	const wechatLogin = () =>{
		let tost = utoast
		uni.login({
			provider: 'weixin',
			// onlyAuthorize: true,
			success: function(loginRes) {
				let onj = loginRes.authResult;
				console.log(loginRes)
				state.aa = JSON.stringify(loginRes)
				uni.getUserInfo({
					provider: 'weixin',
					success: function(info) {
						let id = info.userInfo.openId
						uni.request({
							url:'http://124.221.162.230:8888/account/loginByWxAndOpenId',
							method:'POST',
							data:{
								openId:id
							},
							success: (res) => {
								if(res.data.code == 200){
									let token = res.data.data
									setToken(token);
								}else{
									tost.value.show({
										type: 'error',
										icon: false,
										title: '失败主题',
										message: "该微信未绑定用户账号",
										iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
									})
								}
							},
							fail: (err) => {
								tost.value.show({
									type: 'error',
									icon: false,
									title: '失败主题',
									message: "获取微信用户信息失败",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
								})
							}
						})
						// sendOpenid(info.userInfo.openId)
						// state.res = JSON.stringify(info)
					}
				})
			}
		})
	}
	// 本地存储token
	const setToken = (token) =>{
		let tost = utoast
		uni.setStorage({
			key:'Authorization',
			data:token,
			success: (res) => {
				// setUser(token)
				tost.value.show({
					type: 'success',
					title: '成功主题',
					message: "微信登录成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/index/index'
					})
				},200)
			}
		})
	}
	// 本地存储用户信息
	const setUser = (token) =>{
		let tost = utoast;
		uni.request({
			url:'http://124.221.162.230:8888/user/getById',
			method:'POST',
			header:{
				'Authorization':token
			},
			success: (res) => {
				// console.log(res)
				let value = JSON.stringify(res.data.data)
				uni.setStorage({
					key:'userinfo',
					data:value,
					success: () => {
						tost.value.show({
							type: 'success',
							title: '成功主题',
							message: "微信登录成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},200)
					}
				})
			}
		})
	}
</script>

<style lang="less" scoped>
	.out-box {
		height: 100vh;
		width: 100vw;
		background: #F6FBFF;
		overflow: hidden;
		position: relative;

		.oblique-bar {
			position: absolute;
			top: 0;
			right: 100rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #ffffff, rgb(217, 242, 255));
			transform: translateY(-330rpx) rotateZ(-45deg);
		}

		.oblique-bar-two {
			position: absolute;
			top: 0;
			right: 40rpx;
			width: 100rpx;
			height: 700rpx;
			background: linear-gradient(to bottom, #F3F9FF, rgb(217, 242, 255));
			transform: rotateZ(-45deg);
		}

		.login-card {
			position: absolute;
			top: 20%;
			left: 0;
			width: 100vw;
			height: 80%;
			background-color: #ffffff;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;
			box-shadow: 6px 6px 6px 6px rgba(240, 240, 240, 0.425);

			.login-image {
				position: absolute;
				height: 180rpx;
				width: 180rpx;
				top: -90rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: #ffffff;
				border-radius: 40rpx;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgb(255, 245, 253, 0.225);
				display: flex;
				justify-content: center;
				align-items: center;

				.card-title {
					position: absolute;
					top: -70rpx;
					left: 50%;
					font-size: 42rpx;
					font-weight: 700;
					transform: translateX(-50%);
				}
			}

			.login-form {
				margin-top: 120rpx;
				width: 100%;
				height: calc(100% - 120rpx);

				.login-input {
					transition: all 0.7s;
					.login-title {
						color: rgb(0, 22, 72);
						font-size: 36rpx;
						font-weight: 700;
						margin-left: 5%;
					}

					.input-box {
						margin-top: 20rpx;
						width: 90%;
						margin-left: 5%;
						height: 100rpx;
						border-radius: 20rpx;
						background-color: #fbfbfd;
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						padding-right: 20rpx;
						box-sizing: border-box;

						.input-icon {
							height: 80rpx;
							width: 100rpx;
							background-color: rgba(108, 86, 249, 0.05);
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.input-scanf {
							margin-left: 40rpx;
							width: calc(100% - 200rpx);
							height: 80rpx;
							display: flex;
							align-items: center;

							input {
								height: 60rpx;
								width: 100%;
								font-size: 30rpx
							}
						}

						.input-check {
							width: calc(100% - 300rpx);
						}

						.input-send {
							width: 200rpx;
							height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-weight: 700;
							background-color: rgba(0, 40, 132, 0.1);
							border-radius: 30rpx;
						}

						.input-send-color {
							transition: all 0.3s;
							background-color: rgba(0, 40, 132, 0.2);
						}
					}
				}
				
				.selectBorder{
					border: 2rpx solid #002884;
				}

				.changeCheck {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content:space-between;
					color: #001648;
				}

				.submit {
					margin-top: 40rpx;
					display: flex;
					justify-content: center;

					.submit-button {
						color: #ffffff;
						font-size: 38rpx;
						width: 70%;
						height: 100rpx;
						background: linear-gradient(to right top, rgb(48, 210, 200), rgb(56, 191, 218));
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 60rpx;
					}
				}

				.division {
					width: 100%;
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;

					.division-line {
						width: 30%;
						height: 2rpx;
						background-color: #dbdbdb;
					}

					.division-text {
						color: #dbdbdb;
					}
				}

				.other-login {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-evenly;

					.wechat-login {
						width: 160rpx;
						height: 160rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.zhi-login {
						width: 160rpx;
						height: 160rpx;

						image {
							width: 160rpx;
							height: 160rpx;
						}
					}
				}

				.pass {
					margin-top: 20rpx;
				}
			}
		}
		.login-fail{
			transition: all 2s;
			width: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fef0f0;
			height: 70rpx;
			position: fixed;
			top: -90rpx;
			left:calc(50% - 150rpx);
			border-radius: 20rpx;
			color: #f56c6c;
		}
		.tostFail{
			transition: all 2s;
			transform: translateY(160rpx);
		}
	}
</style>
